<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <p>{{a}}</p>
        <p><button>a++</button></p>
        <comp-a :a="a" b="2" c="3">
            <template>
                1111111
            </template>
        </comp-a>
    </div>
</body>
<script>
    var {createApp,getCurrentInstance} = Vue;
    var {ref,reactive} = Vue;
    var {unref,toRaw,markRaw,isRef,isReactive} = Vue;
    var {onBeforeMount,onMounted} = Vue;


    var compA = {
        inheritAttrs:false,
        props:["a"],
        setup(props){ // props => 父组件传入子组件的数据,如果被子组件接收可以通过props属性访问
            console.log("props",props);
            console.log("props",props.a);

            // 没有被子组件接收的数据  1. 会透传到组件的根元素 2.组件实例上有attrs属性用于存储

            var app = getCurrentInstance(); // comA
            console.log(app);
            console.log(app.attrs);



        },
        template:`<div>
            <p>这是组件A:{{a}}</p>
            <p><button>a++</button></p>
        </div>`,
    }



    var app = createApp({
        components:{
            compA,
        },
        setup(){

            let a = ref(10);
            let zhang =  reactive({name:"张三",age:18});

            return {
                a,
                zhang
            }
        },
        // mounted() {
        //     console.log("选项式","mounted");
        // },
    })

    app.mount("#app");

</script>
</html>